<template>
  <Transition name="fade">
    <div
      v-show="keys?.length"
      arco-theme="dark"
      class="absolute select-none bottom-12 left-1/2 z-[101] -translate-x-1/2 rounded bg-white border shadow px-2 py-1 flex items-center"
    >
      <a-button type="text" title="取消">
        <template #icon>
          <Icon @click="emits('clear')" class="h-6 w-6 text-gray-500" icon="pajamas:close-xs" />
        </template>
      </a-button>
      <span class="text-sm text-gray-400 mx-2">已选 {{ keys.length }} 项</span>
      <a-button type="text" :disabled="!edit" @click="edit && edit(keys)">编辑</a-button>
      <a-button type="text" :disabled="!del" status="danger" @click="del && del(keys)">删除</a-button>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
const props = defineProps<{ keys: (string | number)[]; edit?: Function; del?: Function }>()
const emits = defineEmits(['clear'])
</script>
